<template>
  <!--    <div :id="chartId" style="width:1050px;height: 360px;margin: 0 auto "></div>-->
  <div :id="chartId" style="width: 100%; height: 600px;padding:20px"></div>
</template>

<script>
import m20072019KeywordService from "@/service/m20072019_keyword";

export default {
  name: "chart1",
  components: {
    //someComponent
  },
  props: ["chartId", "chartYjryData", "chartLwData", "centerData", "lwxzList"],
  data() {
    return {
      msg: "Hello Vue.js",
      chartData: null,
    };
  },
  computed: {},
  watch: {},
  mounted: function () {
    this.loadData();
  },
  methods: {
    loadData() {
      this.chartDiv = echarts.init(document.getElementById(this.chartId));
      this.chartDiv.showLoading({
          text: '数据正在加载...',
          textStyle: { fontSize : 30 , color: '#444' },
          effectOption: {backgroundColor: 'rgba(0, 0, 0, 0)'}
      });
      m20072019KeywordService
        .getM20072019KeywordList({
          filter: [["type", 0, "Education and Human Resources"]],
          order: [["year", 0]],
          pageSize: 0,
        })
        .then((res) => {
          this.chartData = res.data;
          this.initData();
          this.chartDiv.hideLoading();
        });
    },
    initData() {
      const hours = [
        2007,
        2008,
        2009,
        2010,
        2011,
        2012,
        2013,
        2014,
        2015,
        2016,
        2017,
        2018,
        2019,
        2020
      ];
      let days = [
          "STEM",
          "Digital Learning",
          "Biological Science",
          "Disabilities",
          "Cognitive Science",
          "Wearable Devices and Learning",
          "Social Network",
          "Personalizing Learning",
          "Collaborative Learning",
          "3D Printing",
          "Deeper Learning",
          "Adaptive Learning Technologies",
          "Teaching Innovation",
          "Authentic Learning",
          "Drone for Education",
          "Visualization Techniques",
          "Self-Directed Education",
          "Personal Web",
          "Learning Spaces",
          "Complex Thinking",
          "Bring Your Own Device(byod)",
          "Flipped Classroom",
          "Makerspaces and Education",
          "Learning Analytics"
      ].reverse();
      let data = [];
      for (let i = 0; i < hours.length; i++) {
        for (let j = 0; j < days.length; j++) {
          this.chartData.forEach((item) => {
            if (item.year == hours[i] && item.keyword == days[j]) {
              data.push([i, j, item.amount_sum]);
            }
          });
        }
      }
      //   data = data.map(function (item) {
      //       return [item[1], item[0], item[2]];
      //   })
      this.initChart(hours, days, data);
    },
    initChart(hours, days, data) {
      "use strict";
      if (!document.getElementById(this.chartId)) return;
      this.chartDiv = echarts.init(document.getElementById(this.chartId));

      const option = {
        title: {
          text: '资助分析',
          textStyle: {
            color: '#D3AF40',
            fontSize: 20,
            lineHeight: 40
          },
          subtext: '教育与人力资源学部',
          subtextStyle: {
            color: '#D3AF40',
            fontSize: 16,
          }
        },
        tooltip: {
          position: "top",
        },
        animation: false,
        grid: {
          // height: '100%',
          top: "8%",
          left: '450', //"200",
          right: "0",
          bottom: 50,
        },
        xAxis: {
          type: "category",
          data: hours,
          position: "top",
          axisLabel: {
            show: true,
            margin: 1,
            padding: [12, 0],
            lineHeight: 20.9,
            // backgroundColor: 'rgb(209,229,244)',
            // borderColor: 'rgb(209,229,244)',
            // shadowColor: 'rgb(209,229,244)',
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitArea: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          itemStyle: {
            backgroundColor: "red",
          },
        },
        yAxis: {
          type: "category",
          data: days,
          position: "left",
          axisLabel: {
            margin: 5,
            padding: [0, 5],
            lineHeight: 20.9,
            // backgroundColor: 'rgb(209,229,244)',
            // borderColor: 'rgb(209,229,244)',
            // shadowColor: 'rgb(209,229,244)',
            formatter(value) {
              return "{value|" + value + "}";
            },
            rich: {
              value: {
                // backgroundColor: 'rgb(209,229,244)',
                // padding: [ 14, 40.5 ],
              },
            },
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitArea: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
        graphic: [
          {
            // 一个图形元素，类型是 group，可以嵌套子节点。
            type: "group",
            bounding: "raws",
            left: 250,
            top: 0,
            z: 1,
            children: [
              {
                type: "rect",
                bounding: "raws",
                shape: {
                  width: 960,
                  height: 48,
                  borderRadius: 10,
                },
                style: {
                  fill: "rgb(209,229,244)",
                  lineWidth: 2,
                  // shadowBlur: 8,
                  // shadowOffsetX: 3,
                  // shadowOffsetY: 3,
                  // shadowColor: 'rgba(0,0,0,0.3)',
                },
              },
              {
                type: "rect",
                bounding: "raws",
                shape: {
                  width: 200,
                  height: 550,
                  borderRadius: 10,
                },
                style: {
                  fill: "rgb(209,229,244)",
                  lineWidth: 2,
                  // shadowBlur: 8,
                  // shadowOffsetX: 3,
                  // shadowOffsetY: 3,
                  // shadowColor: 'rgba(0,0,0,0.3)',
                },
              },
              {
                type: "rect",
                bounding: "raws",
                shape: {
                  width: 200,
                  height: 48,
                  borderRadius: 10,
                },
                style: {
                  fill: "rgb(58,144,206)",
                  lineWidth: 2,
                  // shadowBlur: 8,
                  // shadowOffsetX: 3,
                  // shadowOffsetY: 3,
                  // shadowColor: 'rgba(0,0,0,0.3)',
                },
              },
              {
                type: "text",
                position: [12, 12],
                style: {
                  text: `Trends Examples \n ${hours[0]} - ${hours[hours.length - 1]}`,
                  textAlign: "left",
                  fill: '#fff',
                },
              },
            ],
          },
        ],
        visualMap: {
          min: 0,
          max: 10,
          maxOpen: true,
          type: "piecewise",
          orient: "vertical",
          itemWidth: 70,
          itemHeight: 20,
          // itemGap: 0,
          itemSymbol: 'rect',
          calculable: true,
          position: "left",
          bottom: "150",
          pieces: [
            { min: 1, max: 1000000, label: "under 1 million", color: "rgb(255,239,230)" },
            { min: 1000000, max: 4000000, label: "above 1 million", color: "rgb(254,223,201)" },
            { min: 5000000, max: 10000000, label: "more than 5 millions", color: "rgb(254,204,170)" },
            { min: 10000000, max: 100000000, label: "more than 10 millions", color: "rgb(253,165,90)" },
            { min: 100000000, label: "more than 100 millions", color: "rgb(195,113,36)" },
          ],
        },
        series: [
          {
            type: "heatmap",
            data,
            label: {
              show: false,
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      this.chartDiv.setOption(option);
      window.addEventListener('resize',()=>{
        this.chartDiv.resize();
      });
    },
  },
};
</script>

<style scoped>
</style>
